<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器</title>
    <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../../common/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../../common/bootstrap/js/bootstrap.min.js"></script>

    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border:#000 1px solid;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }

        div.mini {
            width:55px;
            height:55px;
            background-color:#aaa;
            font-size:12px;
        }

        div.hide {
            display:none;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function(){

            $('#button01').click(function(){
                $('#one').css('background','#bbffaa');
            });

            $('#button02').click(function(){
                $('.mini').css('background','#bbffaa');
            });

            $('#button03').click(function(){
                $('div').css('background','#bbffaa');
            });

            $('#button04').click(function(){
                $('*').css('background','#bbffaa');
            });

            $('#button05').click(function(){
                $('span, #two').css('background','#bbffaa');
            });

            $('#button06').click(function(){
                $('body div').css('background','#bbffaa');
            });

            $('#button07').click(function(){
                $('body>div').css('background','#bbffaa');
            });

            $('#button08').click(function(){
                $('.one + div').css('background','#bbffaa');
            });

            $('#button09').click(function(){
                $('#two~div').css('background','#bbffaa');
            });



            $('#button10').click(function(){
                $('#prev~div').css('background','#bbffaa');
            });

            $('#button11').click(function(){
                $('#prev').nextAll('div').css('background','#bbffaa');
            });

            $('#button12').click(function(){
                $('#prev').siblings('div').css('background','#bbffaa');
            });

        });
    </script>
</head>
<body>
    <div class="one" id="one">
        id为one，class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="prev">
        prev，class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two，class为one,title为test的div.
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;" class="none">style的display为“none”的div</div>
    <div class="hide">class为“hide”的div</div>
    <div>
        包含input的type为“hidden”的div<input type="hidden" size="8">
    </div>

    <span id="mover">正在执行动画的span元素.</span>

    <button type="button" id="button01">改变id为one的元素的背景颜色</button>
    <button type="button" id="button02">改变class为mini的所有元素的背景颜色</button>
    <button type="button" id="button03">改变元素名为&lt;div&gt;的所有元素的背景颜色</button>
    <button type="button" id="button04">改变所有元素的背景颜色</button>
    <button type="button" id="button05">改变所有的&lt;span&gt;元素和id为two的元素背景颜色</button>
    <button type="button" id="button06">改变&lt;body&gt;内所有&lt;div&gt;元素的背景颜色</button>
    <button type="button" id="button07">改变&lt;body&gt;内子&lt;div&gt;元素的背景颜色</button>
    <button type="button" id="button08">改变class为one的下一个&lt;div&gt;元素的背景颜色</button>
    <button type="button" id="button09">改变id为two的元素后面的所有&lt;div&gt;兄弟元素的背景颜色</button>


    <button type="button" id="button10">选取id为prev之后的所有同辈&lt;div&gt;元素</button>
    <button type="button" id="button11">选取id为prev之后的所有同辈&lt;div&gt;元素</button>
    <button type="button" id="button12">选取id为prev所有的同辈&lt;div&gt;元素，无论前后位置</button>
</body>
</html>